<html>

<head>
    <style>
        .main {
            background-color: blue;
            width: 100px;
            margin: auto;
            margin-top: 300px;
            cursor: pointer;
        }

        .one {
            color: white;
            text-align: center;
        }

        .main:hover {
            background-color: black;
        }

        .content {
            display: none;
            position: absolute;
            background-color: red;
            width: 100px;
            height: 100px;
        }

        .content:hover {
            background-color: black;
            cursor: pointer;
        }

        .second {
            background-color: rgb(15, 228, 103);
            width: 100%;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="main" id="main">
        <div class="one" id="one"><span>首頁</span></div>
        <div class="content" id="two">
        </div>
    </div>
    <div class="second">

    </div>
</body>
<script>
    var a = document.getElementById('main');
    var c = document.getElementById('two');
    // 为元素添加鼠标移入事件
    a.addEventListener('mouseenter', function () {
        console.log('鼠标移入了div元素！');
        let b = document.getElementById('two');
        b.style.display = "block";
    });
    c.addEventListener('mouseout', function () {
        console.log('鼠标移出了div元素！');
        let b = document.getElementById('two');
        b.style.display = "none";
    });

</script>

</html>